<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Macify Settings</title>
  <script src="js/fonts.js"></script>
  <script src="js/lang.js"></script>
  <link href="css/options.css" rel="stylesheet" />
</head>

<body>
  <main>
    <h1>%_set_options_title <span id="version"></span></h1>
    <div class="note" style="margin-left: 0;">%_set_options_note</div>
    <div class="area">
      <h2>🔤 %_set_language</h2>
      <div class="setting">
        <label for="userLanguage">%_set_language_selector :</label>
        <select id="userLanguage">
          <option value="en">English</option>
          <option value="es">Español</option>
          <option value="ja">日本語</option>
          <option value="zh_CN">简体中文</option>
          <option value="zh_TW">繁體中文</option>
        </select>
      </div>
    </div>
    <div class="area">
      <h2>📺 %_set_videos</h2>
      <div class="note">%_set_note</div>
      <div class="setting">
        <label for="videoSrc">%_set_video_source :</label>
        <select id="videoSrc">
          <option value="apple">%_set_apple_server</option>
          <option value="local">%_set_local_server</option>
        </select>
      </div>
      <div class="setting" id="reverseProxySetting">
        <label for="reverseProxy">%_set_reverse_proxy :</label>
        <input type="checkbox" id="reverseProxy">
      </div>
      <div class="setting" id="videoSourceUrlSetting">
        <label for="videoSourceUrl">%_set_local_videos_list_url :</label>
        <input type="text" class="input" id="videoSourceUrl">
      </div>
      <div class="note" id="videoSourceUrlNote">%_set_video_note</div>
    </div>
    <div class="area">
      <h2>🌥️ %_set_weather</h2>
      <div class="setting">
        <label for="showWeather">%_set_show_weather</label>
        <input type="checkbox" id="showWeather">
      </div>
      <div class="setting">
        <label for="city">%_set_city_name :</label>
        <input type="text" class="input" id="city">
      </div>
      <div class="setting">
        <label for="tempUnit">%_set_temp_unit :</label>
        <select id="tempUnit">
          <option value="celsius">%_set_celsius</option>
          <option value="fahrenheit">%_set_fahrenheit</option>
        </select>
      </div>
      <div class="setting">
        <label for="weatherAPIKEY">%_set_weather_api:</label>
        <input type="text" class="input" id="weatherAPIKEY" placeholder="%_set_your_weather_api_key">

      </div>
      <div class="note">%_set_weather_note</div>
    </div>

    <div class="area">
      <h2>💬 %_set_ask_SearchEnginet</h2>
      <div class="setting">
        <label for="showEngineSearch">%_set_show_SearchEnginet</label>
        <input type="checkbox" id="showEngineSearch">
      </div>
    </div>
    <div class="area">
      <h2>💬 %_set_ask_chatgpt</h2>
      <div class="setting">
        <label for="showSearch">%_set_show_chatgpt</label>
        <input type="checkbox" id="showSearch">
      </div>
      <div class="setting">
        <label for="modelType">%_set_default_model :</label>
        <select id="modelType">
          <option value="gpt-4">GPT-4</option>
          <option value="text-davinci-002-render-sha">GPT-3</option>
        </select>
      </div>
      <div class="setting">
        <label for="delayTime">%_set_delay_time :</label>
        <input type="text" class="input" id="delayTime" min="0">
      </div>
      <div class="note">%_set_delay_note</div>
      <div class="setting">
        <label for="isAutoEnter">%_set_auto_enter :</label>
        <input type="checkbox" id="isAutoEnter">
      </div>
      <!-- Set GPT Gizmo -->
      <div class="setting">
        <label for="showGizmo">%_set_show_gizmo :</label>
        <input type="checkbox" id="showGizmo">
      </div>
      <div id="gizmo_area">
        <div class="setting">
          <label for="gizmo1_name">%_set_gizmo1_name :</label>
          <input type="text" class="input" id="gizmo1_name" placeholder="%_set_gpts_name">
        </div>
        <div class="setting">
          <label for="gizmo1_id">%_set_gizmo1_id :</label>
          <input type="text" class="input" id="gizmo1_id" placeholder="%_set_gpts_id">
        </div>
        <div class="setting">
          <label for="gizmo2_name">%_set_gizmo2_name :</label>
          <input type="text" class="input" id="gizmo2_name" placeholder="%_set_gpts_name">
        </div>
        <div class="setting">
          <label for="gizmo2_id">%_set_gizmo2_id :</label>
          <input type="text" class="input" id="gizmo2_id" placeholder="%_set_gpts_id">
        </div>
        <div class="setting">
          <label for="gizmo3_name">%_set_gizmo3_name :</label>
          <input type="text" class="input" id="gizmo3_name" placeholder="%_set_gpts_name">
        </div>
        <div class="setting">
          <label for="gizmo3_id">%_set_gizmo3_id :</label>
          <input type="text" class="input" id="gizmo3_id" placeholder="%_set_gpts_id">
        </div>
        <div class="note">%_set_gizmo_note</div>
      </div>
    </div>
    </div>
    <div class="area">
      <h2>🕑 %_set_time</h2>
      <div class="setting">
        <label for="showTime">%_set_show_clock</label>
        <input type="checkbox" id="showTime">
      </div>
      <div class="setting">
        <label for="hourSystem">%_set_hour_system</label>
        <select id="hourSystem">
          <option value="12">%_set_12_hour</option>
          <option value="24">%_set_24_hour</option>
        </select>
      </div>
      <div class="note">%_set_clock_note</div>
    </div>

    <div class="area">
      <h2>🔗 %_set_top_sites</h2>
      <div class="setting">
        <label for="showTopSites">%_set_show_top_sites</label>
        <input type="checkbox" id="showTopSites">
      </div>
      <div class="setting">
        <label for="sitesCycle">%_set_histories_within</label>
        <select id="sitesCycle">
          <option value="30">%_set_1_month</option>
          <option value="14">%_set_2_weeks</option>
          <option value="7">%_set_1_week</option>
          <option value="3">%_set_3_days</option>
          <option value="1">%_set_1_day</option>
        </select>
      </div>
      <div class="note">%_set_history_permission</div>
    </div>
    <div class="area">
      <h2>🗣️ %_set_motto</h2>
      <div class="setting">
        <label for="showMotto">%_set_show_motto</label>
        <input type="checkbox" id="showMotto">
      </div>
      <div class="setting" id="translateMotto_area_check">
        <label for="translateMotto">%_set_translate_motto</label>
        <input type="checkbox" id="translateMotto">
      </div>
      <div class="setting" id="translateMotto_area">
        <label for="googleAPIKEY">%_set_google_api:</label>
        <input type="text" class="input" id="googleAPIKEY" placeholder="%_set_your_google_api_key">
      </div>
      <div class="note" id="translateMotto_area_note">%_set_google_api_note</div>
    </div>


    <div class="area">
      <h2>🔘 %_set_others</h2>
      <div class="setting">
        <label for="fontChoice">%_set_choose_font :</label>
        <select id="fontChoice">
          <option value="system-default">%_set_system_default</option>
          <option value="Dosis">Dosis</option>
        </select>
      </div>

      <div class="setting">
        <label for="refreshButton">%_set_show_refresh_button</label>
        <input type="checkbox" id="refreshButton">
      </div>
      <div class="setting">
        <label for="showZenMode">%_set_show_zen_button</label>
        <input type="checkbox" id="showZenMode">
      </div>
      <div class="setting">
        <label for="authorInfo">%_set_show_author_info</label>
        <input type="checkbox" id="authorInfo">
      </div>
    </div>

    <div class="saveinfo">
      <button id="save">%_set_save</button>
      <div id="message"></div>
    </div>
    <footer>Created by <a href="https://jasonng.org">Jason Ng</a>, <a href="https://dofy.net/">Dofy</a>, Setilis.
    </footer>
    <script src="js/options.js"></script>
  </main>
</body>

</html>